<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>动态按钮</title>
	<style>
		button {
			cursor: pointer;
			border: 0;
			padding: .5em 1em;
			color: #fff;
			border-radius: 1em;
			font-size: 1em;
			background-color: #173b6d;
			background-image: linear-gradient(to bottom, #1a4a8e, #173b6d);
			box-shadow: 0 .25em 0 rgba(23, 59, 109, .3), inset 0 1px 0 rgba(0, 0, 0, .3);

			transition: all 150ms;
			/*上下表达效果相同，表示过渡状态与持续时间*/
			/*transition-property: all;
		transition-duration: .15s;*/

			/*过渡计时缓动函数
		transition-timing-function:
		默认函数是ease
		ease,linear：每一帧都是匀速变化、两者之间ease稍微快速
		ease-in：开始慢后来快、
		ease-out：开始快后来慢、
		ease-in-out：两者合起来，两头慢中间快*/


		}

		button:focus {
			background-color: #2158a9;
			background-image: linear-gradient(to bottom, #2063c0, #1d4d90);
			box-shadow: 0 .25em 0 rgba(33, 59, 109, .3), inset 0 1px 0 rgba(0, 0, 0, .3);
		}

		button:active {
			box-shadow: 0 0 0 rgba(23, 59, 109, .3), inset 0 1px 0 rgba(0, 0, 0, .3);
			transform: translateY(.25em);
		}
	</style>
</head>

<body>
	<button type="button">一个按钮</button>
</body>

</html>